<template>
  <div class="wjhzdtj">
    <div class="wjhzdtj-top">
      <el-form :model="form" ref="form" label-width="80px" :inline="true" size="normal">
        <el-form-item label="行政区划">
          <el-cascader v-model="form.stlcc" :options="xzqhdata" :props="xzqhprop" ref="xzqh" @change="xzqhorgChange"
            :clearable="true"></el-cascader>
        </el-form-item>
        <span class="ccq">
          <el-form-item label="超采区">
            <el-select v-model="form.odcd" placeholder="请选择超采区" @change="ccqchange">
              <el-option v-for="item in ccq" :key="item.odnm" :label="item.odcd" :value="item.odcd">
              </el-option>
            </el-select>
          </el-form-item>
        </span>
        <el-form-item label="测站编码">
          <el-input v-model="form.stcd" placeholder="请输入测站编码"></el-input>
        </el-form-item>
        <el-form-item label="测站名称">
          <el-input v-model="form.stnm" placeholder="请输入测站名称"></el-input>
        </el-form-item>
        <el-form-item label="测站类别">
          <el-select v-model="form.sttp" placeholder="请选择">
            <el-option v-for="item in czlx" :key="item.statusid" :label="item.statusname" :value="item.statusname">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="top-button">
        <el-button size="default" @click="chaxun"><i class="iconfont icon-sousuo"></i> 查 询</el-button>
        <el-button size="default" @click="chongzhi"><i class="el-icon-refresh"></i> 重 置</el-button>
        <el-button size="default" @click="daochu"><i class="el-icon-upload2"></i> 导 出</el-button>
      </div>
    </div>
    <div class="wjhzdtj-middle">
      <el-table class="tableBox" :data="tableData" stripe height="90%" :row-class-name="tableRowClassName"
        :header-cell-style="{ background: '#b2dffe', color: '#000' }" style="width: 100%">
        <el-table-column type="selection" width="50" align="center">
        </el-table-column>
        <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="stcd" label="监测站编码" width="100" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="stnm" label="监测站名称" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="addvnm" label="行政区划" width="100" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="odcd" label="超采区" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.odcd }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sttp" label="监测站类别" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.sttp == 1">水利地方站</span>
            <span v-if="scope.row.sttp == 2">水利国家站</span>
            <span v-if="scope.row.sttp == 3">自然资源站</span>
          </template>
        </el-table-column>
        <el-table-column label="季度各月埋深月均值(m)" align="center" :show-overflow-tooltip="true">
          <el-table-column prop="firstBd" :label="this.firstBd + '月埋深月均值'" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="secondBd" :label="this.serchBd + '月埋深月均值'" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="thirdBd" :label="this.threeBd + '月埋深月均值'" :show-overflow-tooltip="true">
          </el-table-column>
        </el-table-column>
        <el-table-column prop="bd" label="计算埋深" width="120" :show-overflow-tooltip="true">
        </el-table-column>
      </el-table>
      <div class="bottom">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="currentPage" :page-size="pagesize" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { xzqhlist, qylx, sjtqccqdymc, ccqjzztjlist, ccqwjhjzzdc } from '@/api/index'
import dayjs from 'dayjs'
import exprotFile from "@/utils/exportFile"
export default {
  data() {
    return {
      // 主页头部表单
      form: {
        stlcc: '220000',//行政区划
        odcd: '',//超采区
        stcd: '',//测站编码
        stnm: '',//测站名称
        sttp: '',//测站类型
        yr: '',//去年
        quarter: "1",//季度
        yr1: "",//今年
      },
      xzqhdata: [],//行政区划
      xzqhprop: {
        label: "addvnm",
        value: "addvcd",
        children: "addvcds",
        checkStrictly: true,
      },
      firstBd: "",//上季度的第一个月
      serchBd: "",//上季度的第二个月
      threeBd: "",//上季度的第三个月
      fourBd: '',//本季度第一个月
      ccq: [], // 超采区下拉框内容
      czlx: [],// 测站类别下拉框数组内容
      tableData: [], // 表格数据
      // 底部页码
      pagesize: 10,
      currentPage: 1,
      total: 10,
      etm: '',//本季度起始月份
      stm: '',//上季度起始月份
    }
  },
  mounted() {
    this.xzqhlist();//获取行政区划
    this.sjtqccqdymc();//获取超采区
    this.qylxobj();//获取测站类别
    let quarterOfYear = require('dayjs/plugin/quarterOfYear')
    dayjs.extend(quarterOfYear)
    // console.log(quarterOfYear);
    let start = dayjs().add(-1, 'quarter').startOf('quarter').format('MM')
    let middle = Number(start) + 1
    let end = dayjs().add(-1, 'quarter').endOf('quarter').format('MM')
    var end1 = Number(end) + 1;//本季度起始月
    if (end == 12) {
      end1 = 1
      if (end1 < 10) {
        end1 = '0' + end1
      }
    }
    // console.log(start, middle, end);
    if (start == 10) {
      this.form.quarter = 4
    } else if (start == 1) {
      this.form.quarter = 1
    } else if (start == 4) {
      this.form.quarter = 2
    } else if (start == 7) {
      this.form.quarter = 3
    }
    this.firstBd = start
    this.serchBd = middle
    this.threeBd = end
    this.fourBd = end1
    this.getriqi();//获取日期
    this.ccqjzztjlist();//获取表格数据
  },
  methods: {
    // 获取年份
    getriqi() {
      let year1
      let nowdays = new Date()
      let year = nowdays.getFullYear()
      let month = nowdays.getMonth()
      if (month === 0) {
        month = 12
        year = year - 1
        // this.quarter = 3
      }
      if (month == 1 || month == 2) {
        year = year - 1
      }
      if (month < 10) {
        month = '0' + month
      }
      if (this.fourBd == 1) {
        year1 = Number(year) + 1
      }
      // console.log(year1);
      this.form.yr = year + ''
      this.form.yr1 = year1 + ''
      // console.log(this.form.yr);
      let yDate = new Date(year, month, 0)
      let startDareTime = year + '-' + this.firstBd + '-01'
      let endDateTime = year1 + '-' + this.fourBd + '-01'
      // console.log(startDareTime, endDateTime);
      this.stm = startDareTime
      this.etm = endDateTime
    },
    // 获取行政区划
    async xzqhlist() {
      const addvcd = '220000'
      const res = await xzqhlist(addvcd)
      // console.log(res.data.data);
      this.xzqhdata = res.data.data
    },
    // 行政区划的切割
    xzqhorgChange(val) {
      this.form.stlcc = val.slice(-1).toString();
      this.$refs.xzqh.dropDownVisible = false;
      // console.log(this.form.stlcc);

    },
    // 获取超采区
    async sjtqccqdymc() {
      const res = await sjtqccqdymc(this.form.stlcc)
      console.log(res);
      this.ccq = res.data.data
    },
    // 超采区变化
    ccqchange(val) {
      this.form.odcd = val
      // console.log(val);
    },
    // 获取区域类型数据
    async qylxobj() {
      // task_status
      // 获取状态数据
      const zt = 'station_genre'
      const res4 = await qylx(zt)
      // console.log(res4);
      this.czlx = res4.data.data
      // console.log(this.czlx);
      const czlx1 = []
      this.czlx.map((item, index, arr) => {
        if (item.statusid == 1) {
          return;
        }
        else {
          czlx1.push(item)
        }
        // console.log(czlx1);
      })
    },
    // 获取表格数据
    async ccqjzztjlist() {
      const jzzobj = {
        etm: this.etm,
        odcd: this.form.odcd,//超采区
        pageInfo: {
          pageIndex: this.currentPage,
          pageSize: this.pagesize
        },
        quarter: this.form.quarter,//季度
        quarter_status: 0,
        stcd: this.form.stcd,
        stcdArray: [],
        sthn: '',
        stlcc: this.form.stlcc,
        stm: this.stm,
        stnm: this.form.stnm,
        sttp: this.form.sttp,
        year: this.form.yr
      }
      const res = await ccqjzztjlist(JSON.stringify(jzzobj))
      // console.log(res);
      this.tableData = res.data.data.list
      // console.log(this.tableData);
    },
    handleChange() {

    },
    // 表格的隔行颜色改变
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return 'statistiss-row'
      } else {
        return ''
      }
    },
    handleCurrentChange() {

    },
    handleSizeChange() {

    },
    // 查询
    chaxun() {
      this.ccqjzztjlist();//获取表格数据
    },
    // 重置
    chongzhi() {
      this.form.stlcc = '220000'
      this.form.odcd = ''
      this.form.stcd = ''
      this.form.stnm = ''
      this.form.sttp = ''
      this.pagesize = 10
      this.currentPage = 1
      this.ccqjzztjlist();//获取表格数据
    },
    // 导出
    daochu() {
      const ccqwjhjzzdaochuobj = {
        etm: this.etm,
        odcd: this.form.odcd,
        pageInfo: {
          pageIndex: this.currentPage,
          pageSize: this.pagesize
        },
        quarter: this.form.quarter,
        quarter_status: 0,
        stcd: this.form.stcd,
        sthn: '',
        stlcc: this.form.stlcc,
        stm: this.stm,
        stnm: this.form.stnm,
        sttp: this.form.sttp,
        year: this.form.yr
      }
      // console.log(ccqwjhjzzdaochuobj);
      ccqwjhjzzdc(JSON.stringify(ccqwjhjzzdaochuobj)).then(res => {
        // console.log(res);
        exprotFile.getExcel(res.data, "超采区通报未校核站点数据统计");
      })
    }
  }
}
</script>
<style lang="scss" scoped>
html,
body {
  height: 100%;
}

.wjhzdtj {
  width: 100%;
  height: 100%;

  ::v-deep .wjhzdtj-top {
    width: 97%;
    height: 10%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    /* border: 1px solid red; */

    .el-form {
      /* width: 75%; */
      height: 100%;
      float: left;

      .el-form-item {
        padding-top: 10px;
        padding-right: 10px;

        .el-form-item__label {
          background-color: #0055ab;
          color: #fff;

          .el-input {
            width: 120px;

            .el-input__inner {
              width: 100%;
            }
          }
        }
      }
    }

    .top-button {
      /* width: 25%; */
      height: 100%;
      padding-top: 10px;
      float: right;

      .el-button {
        background-color: #0055ab;
        color: #fff;

        .iconfont {
          font-size: 14px;
        }
      }
    }
  }

  ::v-deep .wjhzdtj-middle {
    width: 97%;
    height: 90%;
    margin: 0 auto;
    /* border: 1px solid red; */
    box-sizing: border-box;

    .el-table {
      width: 100%;
      height: 90%;
      background-color: rgb(243, 243, 243);
      padding-top: 10px;

      .el-table__header-wrapper {}

      .el-table__body-wrapper {}
    }

    .bottom {
      width: 100%;
      height: 10%;

      .el-pagination {
        position: absolute;
        bottom: 3%;
        right: 6%;
      }
    }
  }
}

/* 控制top表单的宽度 */
/deep/ .el-input {
  width: 6.25rem;

  .el-input__inner {
    width: 100%;
  }
}

// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 2px; // 纵向滚动条 必写
}

// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}


/* 表格的行高 */
/deep/ .tableBox {
  th {
    padding: 0 !important;
    height: 30px;
    line-height: 30px;
  }

  td {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
  }
}

// 鼠标经过颜色
/deep/ .el-table__body tr:hover>td {
  background-color: #d9effe !important;
}

/* 列标题的字体颜色 */
/deep/ .el-table th.el-table__cell>.cell {
  color: #000;
}

/* 内容的字体颜色 */
/deep/ .el-table--enable-row-transition .el-table__body td.el-table__cell {
  color: #000;
}

/* 表格隔行改变的颜色 */
/deep/ .el-table__row.statistiss-row {
  background-color: #f2faff;
}

/* 去掉表格滚动条上方的表格标题背景色 */
/deep/ [data-v-13877386] .el-table th.el-table__cell {
  background-color: rgb(243, 243, 243) !important;
}

/deep/ .ccq {
  .el-form-item {
    .el-form-item__label {
      /* color: red !important; */
      width: 70px !important;
      /* text-align: center !important; */
    }
  }
}
</style>